<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Books</title>
    <%@ include file="./includes/bulma.jsp" %>
  </head>
  <body>
    <%@ include file="./includes/navbar.jsp" %>
	<section class="section">
      <div class="columns">
        <div class="column is-4-tablet is-3-desktop is-2-widescreen">
            <%@ include file="./includes/sidebar.jsp" %>      
        </div>
        <div class="column">
          <nav class="breadcrumb">
            <ul>
              <li>
                <a href="books.jsp">Books</a>
              </li>
              <li class="is-active">
                <a href="edit-book.jsp">Edit Book</a>
              </li>
            </ul>
          </nav>

          <form>
            <div class="field">
              <div class="field">
                <label class="label">Title</label>
                <div class="control">
                  <input class="input is-large" type="text" placeholder="e.g. Designing with Bulma" 
                    value="TensorFlow For Machine Intelligence" required>
                </div>
              </div>
            </div>

            <div class="columns is-desktop">
              <div class="column">
                <label class="label">Price</label>
                <div class="control has-icons-left">
                  <input class="input" type="number" placeholder="e.g.22.99" value="22.99" required>
                  <span class="icon is-small is-left">
                    <i class="fa fa-dollar"></i>
                  </span>
                </div>
              </div>

              <div class="column">
                <label class="label">Pages</label>
                <div class="control">
                  <input class="input" type="number" placeholder="e.g. 270" value="270" required>
                </div>
              </div>

              <div class="column">
                <label class="label">ISBN</label>
                <div class="control">
                  <input class="input" type="number" placeholder="e.g. 9781939902351" value="9781939902351" required>
                </div>
              </div>
            </div>

            <div class="field">
              <label class="label">Cover Image</label>
              <div class="control">
                <img src="images/tensorflow.jpg">
              </div>
              <div class="control">
                <div class="file has-name">
                  <label class="file-label">
                    <input class="file-input" type="file">
                    <span class="file-cta">
                      <span class="file-icon">
                        <i class="fa fa-upload"></i>
                      </span>
                      <span class="file-label">Choose a file...</span>
                    </span>
                    <span class="file-name">No file chosen</span>
                  </label>
                </div>
              </div>
            </div>

            <div class="field">
              <div class="buttons">
                <button class="button is-medium is-success">Create Book</button>
                <button class="button is-medium is-light">Cancel</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </section>
  </body>
</html>
